<template>
  <j-modal
      :title="title"
      :width="1000"
      :visible="visible"
      :confirmLoading="confirmLoading"
      switchFullscreen
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="活动名称">
              <a-input placeholder="请输入活动名称" v-decorator="['actName', validatorRules.actName]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="预算">
              <j-select-budget-fee placeholder="请选择预算" :multiple="false"
                                   v-decorator="['budgetCode', validatorRules.budgetCode]"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="活动大类">
              <j-select-biz-component :width="1000" v-bind="categoriesConfigs" :checkVal="getBudgetCode" v-on="$listeners"
                                      v-decorator="['categoriesCode', validatorRules.categoriesCode]"/>
              <!--              <j-select-categories placeholder="请选择活动大类" :multiple="false"-->
              <!--                                   :checkVal="getBudgetCode" :checkTip="'请选先择预算'"-->
              <!--                                   v-decorator="['categoriesCode', {}]"/>-->
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="申请金额">
              <a-input-number v-decorator="[ 'amount', validatorRules.amount]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="活动时间">
              <a-range-picker format="YYYY-MM-DD" v-decorator="['actDate', validatorRules.actDate]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="订货时间">
              <a-range-picker format="YYYY-MM-DD" v-decorator="['orderDate', validatorRules.orderDate]"/>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24">
            <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="备注">
              <a-textarea placeholder="请输入备注" v-decorator="['remarks', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <!-- 活动明细 -->
    <a-tabs v-model="tabs.activeKey">
      <a-tab-pane tab="活动明细" :key="tabs.global.key" forceRender>
        <tpm-act-detail-list :categoriesCode="getcategoriesCode" :tempUuid="this.form.tempUuid"></tpm-act-detail-list>
      </a-tab-pane>
    </a-tabs>
  </j-modal>
</template>

<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"
import {FormTypes} from '@/utils/JEditableTableUtil'
import JEditableTable from '@comp/cn-form/JEditableTable'
import TpmActDetailList from '../TpmActDetailList'
import JSelectBudgetFee from '@/components/cn-select-popup/JSelectBudgetFee'
import JSelectCategories from '@/components/cn-select-popup/JSelectCategories'
import JSelectBizComponent from '@/components/cn-select-popup/JSelectBizComponent'
import { PageListMixin } from '@/mixins/PageListMixin'
export default {
  name: "TpmActModal",
  mixins: [PageListMixin],
  components: {
    JEditableTable, TpmActDetailList, JSelectBudgetFee, JSelectCategories,JSelectBizComponent,
    'my-action-button': {
      props: {rowEvent: Object, allowEmpty: Boolean},
      methods: {
        confirmIsShow() {
          const {index, allValues: {inputValues}} = this.rowEvent
          let value = inputValues[index]
          return value.digits || value.pattern
        },
        handleLineAdd() {
          const {target} = this.rowEvent
          target.add()
        },
        handleLineDelete() {
          const {rowId, target} = this.rowEvent
          target.removeRows(rowId)
        },
        renderDeleteButton() {
          if (this.allowEmpty || this.rowEvent.index > 0) {
            if (this.confirmIsShow()) {
              return (
                  <a-popconfirm title="确定要删除吗？" onConfirm={this.handleLineDelete}>
                    <a-button icon="minus"/>
                  </a-popconfirm>
              )
            } else {
              return (
                  <a-button icon="minus" onClick={this.handleLineDelete}/>
              )
            }
          }
          return ''
        },
      },
      render() {
        return (
            <div>
              <a-button onClick={this.handleLineAdd} icon="plus"/>
              &nbsp;
              {this.renderDeleteButton()}
            </div>
        )
      }
    }
  },
  computed: {
    categoriesConfigs: {
      get() {
        return {
          name: '活动大类',
          displayKey: 'categoriesName',
          returnKeys: ['id', 'categoriesCode'],
          listUrl: window._CONFIG['domianTpmURL']+'/act/tpmActCategories/findPageList',
          queryParamCode: 'categoriesName',
          queryParamText: '活动大类名称',
          columns: [
            {title: '活动大类名称', dataIndex: 'categoriesName', align: 'center', width: '50%', widthRight: '70%'},
            {title: '活动大类编号', dataIndex: 'categoriesCode', align: 'center', width: '50%'},
          ],
          checkTip:{
            budgetCode:'请选先择预算'
          },
        }
      }
    }
  },
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        actName:{rules: [{ required: true, message: '请输入活动名称!' }]},
        budgetCode:{rules: [{ required: true, message: '请选择预算!' }]},
        categoriesCode:{rules: [{ required: true, message: '请选择活动大类!' }]},
        amount:{rules: [{ required: true, message: '请确认申请金额!' }]},
        actDate:{rules: [{ required: true, message: '请确认活动时间!' }]},
        orderDate:{rules: [{ required: true, message: '请确认订货时间!' }]},
      },
      tabs: {
        activeKey: 'global',
        global: {
          key: 'global',
          columns: [
          ],
          dataSource: [],
        },
      },
      url: {
        add:window._CONFIG['domianTpmURL']+ "/act/tpmAct/saveOrUpdate",
        edit:window._CONFIG['domianTpmURL']+ "/act/tpmAct/saveOrUpdate",
      },
    }
  },
  created() {
  },
  methods: {
    getcategoriesCode() {
      return !!this.form.getFieldValue('categoriesCode')
    },
    getTempUuid(){
      return this.form.getFieldValue('tempUuid')
    },
    getBudgetCode() {
      return {'budgetCode': this.form.getFieldValue('budgetCode')}
    },
    add() {
      this.edit({});
    },
    edit(record) {
      this.form.resetFields();
      var actDate=new Array();
      actDate.push(record.beginDate);
      actDate.push(record.endDate);
      this.form.actDate = actDate;

      var orderDate=new Array();
      orderDate.push(record.orderBeginDate);
      orderDate.push(record.orderEndDate);

      if (record.tempUuid == undefined || record.tempUuid == ''){
        record.tempUuid = this.generateUUID(false);
      }
      this.form.tempUuid = record.tempUuid
      this.model = Object.assign({}, record);
      this.model.orderDate = orderDate;
      this.model.actDate = actDate;
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'actDate','orderDate','remarks', 'actType', 'actCode', 'actName', 'budgetCode', 'budgetName', 'receiptor', 'amount', 'beginDate', 'endDate', 'orderBeginDate', 'orderEndDate', 'tempUuid', 'auditStatus', 'processKey', 'needShare', 'categoriesCode', 'categoriesName', 'receiptorPositionCode', 'budgetSubjectsCode', 'budgetSubjectsName', 'workFlowKey', 'workFlowName'))
        //时间格式化
      });

    },

    handleAdd() {

    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
            httpurl += this.url.add;
            method = 'post';

          let formData = Object.assign(this.model, values);
          //时间格式化
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })


        }
      })
    },
    handleCancel() {
      this.close()
    },


  }
}
</script>

<style lang="less" scoped>

</style>
